import { useState } from 'react';
import ReactDOM from 'react-dom';
import api from 'api/config';
import { toast } from 'react-toastify';

const DeleteButton = ({ data, handleDeleteComplete }) => {
    const [showDeleteModal, setShowDeleteModal] = useState(false);
    const handleDeleteClick = (event) => {
        event.stopPropagation();
        setShowDeleteModal(true);
    };
    const handleConfirmDelete = async () => {
        setShowDeleteModal(false);
        try {
            const response = await api.get(`/v1/tob/job/${data.jobId}`);

            if (response.data.result_url.length == 1) {
                data.no = -1;
            }
            try {
                const response = await api.post('/v1/tob/delete-job', data);
                if (response.status === 200) {
                    if (handleDeleteComplete) {
                        handleDeleteComplete();
                    }
                    toast.success('删除成功！', {
                        autoClose: 1000, // 自动关闭时间（毫秒）
                        hideProgressBar: true,
                    });
                }
            } catch (error) {}
        } catch (error) {}
        // try {
        //     const response = await api.post('/v1/tob/delete-job', data);
        //     if (response.status === 200) {
        //         if (handleDeleteComplete) {
        //             handleDeleteComplete();
        //         }
        //     }
        // } catch (error) {}
    };

    const handleCancelDelete = () => {
        setShowDeleteModal(false);
    };

    // 阻止弹窗背景的点击事件冒泡
    const handleModalClick = (event) => {
        event.stopPropagation();
    };

    return (
        <>
            <div className="tool-btn delete-btn" onClick={handleDeleteClick}>
                <img
                    src="https://img.alicdn.com/imgextra/i4/O1CN01bH1ymP1uZs4uMEhqr_!!6000000006052-55-tps-24-24.svg"
                    alt=""
                />
            </div>

            {showDeleteModal &&
                ReactDOM.createPortal(
                    <div
                        className="delete-modal-overlay"
                        onClick={handleCancelDelete}
                    >
                        <div
                            className="delete-modal-content"
                            onClick={handleModalClick}
                        >
                            <div className="modal-header">
                                <h3>删除</h3>
                                <button
                                    className="close-btn"
                                    onClick={handleCancelDelete}
                                >
                                    <img
                                        src="https://img.alicdn.com/imgextra/i1/O1CN01j2oIA026jk0C1b1aU_!!6000000007698-55-tps-24-24.svg"
                                        alt=""
                                    />
                                </button>
                            </div>
                            <div className="modal-body">
                                <p>删除后不可恢复。</p>
                            </div>
                            <div className="modal-footer">
                                <button
                                    className="cancel-btn"
                                    onClick={handleCancelDelete}
                                >
                                    取消
                                </button>
                                <button
                                    className="confirm-btn"
                                    onClick={handleConfirmDelete}
                                >
                                    确认删除
                                </button>
                            </div>
                        </div>
                    </div>,
                    document.body // ✅ 挂载到 body
                )}
        </>
    );
};

export default DeleteButton;
